<div data-bind="with: currentQuestion">
	<div class="container-fluid">
		<div class="row justify-content-center">
			<div class="col-md-12 col-lg-9">
				<h1 data-bind="text: title"></h1>
			</div>
			<div class="col-md-12 col-lg-3 input-group mark-question">
				<input data-bind="value: $parent.annotationInput" class="form-control" type="text" />
				<div class="input-group-btn ml-2">
					<button data-bind="click: $parent.markQuestionClick" class="btn btn-primary">Mark</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="container-fluid shadowy-containter">
				<div class="row">
					<div class="col-md-12 col-lg-2">
						<h3>
							<span data-bind="text: score" class="badge badge-primary"></span>
						</h3>
						<h3 data-bind="text: authorName"></h3>
					</div>
					<div class="col-md-12 col-lg-10">
						<div data-bind="html: body"></div>
					</div>
					<div data-bind="visible: commentsCount > 0" class="container-fluid">
						<div class="row border-top mt-4 pt-3">
							<div class="col-md-12 col-lg-2">
								<h3>
									<span data-bind="text: commentsCount"></span> comments:
								</h3>
							</div>
							<div class="col-md-12 col-lg-10">
								<div data-bind="foreach: comments">
									<div class="card mb-2">
										<div class="row card-body">
											<div class="col-sm-2 mb-xs-2">
												<span data-bind="text: score" class="badge badge-secondary"></span>
												<span data-bind="text: authorName" class="font-italic"></span>
											</div>
											<div data-bind="text: text" class="col-sm-10"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row justify-content-end mt-md-4">
			<div data-bind="visible: acceptedAnswer === null" class="col-md-12 col-lg-11">
				<div class="alert alert-warning" role="alert">
					<p>This question doesn't seem to have an accepted answer.</p>
				</div>
			</div>
			<div data-bind="visible: acceptedAnswer !== null, with: acceptedAnswer" class="col-md-12 col-lg-11 shadowy-containter mt-3">
				<h4><span class="badge badge-success">&#10003;</span> Accepted answer</h4>
				<hr />
				<div class="row">
					<div class="col-md-12 col-lg-2">
						<h3>
							<span data-bind="text: score" class="badge badge-primary"></span>
						</h3>
						<h3 data-bind="text: authorName"></h3>
					</div>
					<div class="col-md-12 col-lg-10">
						<div data-bind="html: body"></div>
					</div>
				</div>
				<div data-bind="visible: comments.length > 0" class="row">
					<div class="container-fluid">
						<div class="row border-top mt-4 pt-3">
							<div class="col-md-12 col-lg-2">
								<h3>Comments:</h3>
							</div>
							<div class="col-md-12 col-lg-10">
								<div data-bind="foreach: comments">
									<div class="card mb-2">
										<div class="row card-body">
											<div class="col-sm-1">
												<span data-bind="text: score" class="badge badge-secondary"></span>
											</div>
											<div data-bind="text: text" class="col-sm-11"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row justify-content-end">
			<div class="col-md-12 col-lg-11">
				<h2 class="mt-md-3">Other answers</h2>
			</div>
		</div>
		<div data-bind="foreach: answers" class="row justify-content-end">
			<div class="col-md-12 col-lg-11 shadowy-containter mt-3">
				<div class="row">
					<div class="col-md-12 col-lg-2">
						<h3>
							<span data-bind="text: score" class="badge badge-primary"></span>
						</h3>
						<!-- <p data-bind="text: authorName"></p> -->
					</div>
					<div class="col-md-12 col-lg-10">
						<div data-bind="html: body"></div>
					</div>
				</div>
				<div data-bind="visible: comments.length > 0" class="row">
					<div class="container-fluid">
						<div class="row border-top mt-4 pt-3">
							<div class="col-md-12 col-lg-2">
								<h3>Comments:</h3>
							</div>
							<div class="col-md-12 col-lg-10">
								<div data-bind="foreach: comments">
									<div class="card mb-2">
										<div class="row card-body">
											<div class="col-sm-1">
												<span data-bind="text: score" class="badge badge-secondary"></span>
											</div>
											<div data-bind="text: text" class="col-sm-11"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>